<template>
  <div>
    <a-row>
      <a-col :span="8">
        <a-card :title="data.areaName" style="height: 600px;">
          <h2>mac地址：{{data.mac}}</h2>
          <div style="text-align: right;">
            <a-button @click="edit(data)" type="primary" style="margin-bottom: 10px;">编辑</a-button>
          </div>
          <p>名称：{{data.name}}</p>
          <p>X地址：{{data.locationX}}</p>
          <p>Y地址：{{data.locationY}}</p>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card title="设备分布" style="height: 600px;">
          <div id="map"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-modal title="编辑AP" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <a-form-model :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="名称">
          <a-input v-model="formData.name" placeholder="请输入名称" />
        </a-form-model-item>
        <a-form-model-item label="mac地址">
          <a-input v-model="formData.mac" placeholder="请输入mac地址" />
        </a-form-model-item>
        <a-form-model-item label="坐标X">
          <a-input v-model="formData.locationX" placeholder="请输入坐标X" />
        </a-form-model-item>
        <a-form-model-item label="坐标Y">
          <a-input v-model="formData.locationY" placeholder="请输入坐标Y" />
        </a-form-model-item>
      </a-form-model>

    </a-modal>

  </div>

</template>

<script>
  import {
    getAction,
    postAction
  } from '@/api/manage'

  /* import L from "leaflet";
  import "leaflet/dist/leaflet.css"; */

  export default {
    data() {
      return {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 14
        },
        visible: false,
        id: 'hi',
        url: {
          queryAp: '/map-ap/queryAp',
          update: '/map-ap/update'
        },
        data: {},
        formData: {},
        map: '',
        position:[],
        positionstr:''
      }
    },
    methods: {
      initMap() {
        let map = L.map('map', {
          minZoom: -4,
          maxZoom: 4,
          center: [200, 200],
          zoom: 0,
          crs: L.CRS.Simple
        });
        
        var w = 4000,
          h = 3000,
          url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zx123.cn%2FResources%2Fzx123cn%2Fuploadfile%2F2015%2F0723%2F6dcb7912cc88998d5353a54b3bfa28ef.jpg&refer=http%3A%2F%2Fimg.zx123.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659015480&t=aca5f6135d46da5fdd4d604f86bf11ba';
        var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
        var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
        var bounds = new L.LatLngBounds(southWest, northEast);
        // add the image overlay,
        // so that it covers the entire map
        L.imageOverlay(url, bounds).addTo(map);
        var marker = L.marker(this.position).addTo(map);
        // tell leaflet that the map is exactly as big as the image
        map.setMaxBounds(bounds);
        this.map=map
      },
      edit(data) {
        this.formData = data
        this.visible = true
      },
      handleOk() {
        postAction(this.url.update, this.formData).then(r => {
          if (r.success) {
            alert(r.message)
            this.visible = false;
            this.formData = {}
            this.queryAp()
          }
        })
      },
      handleCancel() {
        this.visible = false
      },
      queryAp() {
        console.log(this.position)
        getAction(this.url.queryAp, {
          id: this.id
        }).then(r => {
          // console.log(r)
          this.data = r.result
          // console.log(this.data)
          var arr=[]
          let y =parseInt(this.data.locationY)
          let x=parseInt(this.data.locationX)
          arr.push(y)
          arr.push(x)
          this.position=arr
        })
      }
    },
    created() {
      this.id = this.$route.query.id;
      this.queryAp()
    },
    updated() {
      console.log(this.position)
      this.initMap();      
    },
  }
</script>
<style>
  #map {
    width: 100%;
    height: 500px;
    z-index: 1;

  }
</style>
